<template>
    <el-row :gutter="0" style="display: flex;align-items: center;margin-left: 1%;">
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">标题</span>
      <el-input size="large" v-model="condition.title" style="width: 240px" placeholder="请输入标题" />
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">内容</span>
      <el-input size="large" v-model="condition.content" style="width: 240px" placeholder="请输入内容" />
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">时间</span>
      <el-date-picker
        v-model="condition.publishTime"
        type="date"
        placeholder="选择日期"
        size="large"
           format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />

    </el-row>
    <el-row style="margin-top: 20px;" justify="space-between">
      <el-col :span="10">
        <el-button type="primary" style="margin: 0 15px;" @click="search">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button type="primary" style="margin: 0 15px;" @click="toadd">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
      </el-col>
    </el-row>

    <el-row style="padding-top: 20px;">
      <publicityManagementTable :Publicity="Publicity" @delete="deleteid" @edit="toedit" />
   
      <el-pagination
      v-model:current-page="condition.pagenum"
      v-model:page-size="condition.pagesize"
      :page-sizes="[10,20,30,40,50]"
      size="large"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle"
     
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-row>
    <el-dialog :title="title" width="1200px" height="800px" v-model="visible" @close="onClose" top="0vh">
      <!-- 表单 -->
      <el-form :model="Publicitydata">
        <el-form-item label="编号" prop="id" v-if="title == '编辑' ? true : false">
          <el-input disabled placeholder="请填写id" :maxLength="20" v-model="Publicitydata.id"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="PublicityName">
          <el-input placeholder="请填写标题" v-model="Publicitydata.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="password">
          <TEditor :modelValue="Publicitydata.content"  @update:modelValue="modelValue"></TEditor>
        </el-form-item>
     
        <el-form-item label="时间" prop="nickName">
            <el-date-picker
        v-model="Publicitydata.publishTime"
        type="date"
        placeholder="选择日期"
        size="large"
         format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
        </el-form-item>
        
      </el-form>
      <!-- 表单 -->
  
      <template #footer>
        <div class="dialog-footer">
          <el-button size="default" @click="onClose">取 消</el-button>
          <el-button size="default" type="primary" @click="handleOk">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script setup>
import publicityManagementTable from '@/components/publicityManagementTable/publicityManagementTable.vue';
  import axios from 'axios';
  import { onMounted, reactive, ref } from 'vue';
  import TEditor from '@/components/TEditor.vue';
  // 分页
  let totle = ref(0)
  function handleSizeChange(val) {
   star()
    
  }
  function handleCurrentChange(val) {
    star()
  }
// 富文本
  function modelValue(value) {
    console.log('value',value);
    Publicitydata.content = value;
  }
  // 定义数据对象
  let Publicity = ref([])
  // 定义条件对象
  let condition = reactive({
    pagenum: 1,
    pagesize: 10,
    id: 0,
title:'',
content:'',
publishTime:''
  })
  // 初始化加载数据
  onMounted(()=>{
star()
  })
 function star(){
  return  axios.post('/publicity/selectAll', condition).then(res => {
    console.log("初始数据", res.data.data)
    Publicity.value = res.data.data.list;
    totle.value = res.data.data.total;
  }).catch(err => {
    alert(err.data)
  })
 }
  
  // 接收删除参数
  function deleteid(id) {
    console.log('id', id);
    axios.post('/publicity/delete', { did:id, ...condition }).then(res => {
      console.log('res.data.data', res.data.data);
      if (res.data.code==2) {
        alert(res.data.msg)
      } else {
        Publicity.value = res.data.data.list
        totle.value = res.data.data.total;
      }
    }).catch(err => {
      alert(err)
    })
  }
  // 查询
  function search() {
    axios.post('/publicity/selectAll', condition).then(res => {
      console.log('res.data.data', res.data.data);
      if (res.data.code==2) {
        alert(res.data.msg)
      } else {
        Publicity.value = res.data.data.list
        totle.value = res.data.data.total;
      }
    }).catch(err => {
      alert(err)
    })
  }
  // 弹窗数据
  let visible = ref(false)
  let title = ref('')
  let Publicitydata = reactive({
    id: 0,
title:'',
content:'',
publishTime:''
  })
  
  
  function toedit(row) {
    visible.value = true
    title.value = '编辑'
    Publicitydata = reactive(row)
    
  
  }
  function toadd() {
    visible.value = true
    title.value = '添加'
  }
  async function handleOk() {
    if (title.value == '添加') {
      let aa = () => {
        let sys = JSON.stringify(Publicitydata)
        return axios.post('/publicity/insert', {publicity: sys, ...condition }).then(res => {
          if (res.data.code==2) {
            alert(res.data.msg)
          } else {
            Publicity.value = res.data.data.list
            totle.value = res.data.data.total;
          }
        }).catch(err => {
          alert(err)
        })
      }
      await aa();
    }
    if (title.value == '编辑') {
      let bb = () => {
        let sys = JSON.stringify(Publicitydata)
        return axios.post('/publicity/update', {publicity: sys, ...condition }).then(res => {
  
          if (res.data.code==2) {
            alert(res.data.msg)
          } else {
            Publicity.value = res.data.data.list
            totle.value = res.data.data.total;
          }
        }).catch(err => {
          alert(err)
        })
      }
      await bb()
    }
    Publicitydata = reactive({
        id: 0,
title:'',
content:'',
publishTime:''
  })
  
    visible.value = false
  }
  function onClose() {
    visible.value = false
    Publicitydata = reactive({
        id: 0,
title:'',
content:'',
publishTime:''
  })
  }
  
  </script>



